﻿@using System.Web
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }

        .solid-table {
            border-collapse: collapse;
            width: 100%;
        }

            .solid-table td {
                border: 1px solid #333;
                padding: 8px;
                text-align: left;
            }

            .solid-table th {
                border: 1px solid #333;
                padding: 8px;
                text-align: left;
            }

        .bj {
            background-color: #FFD553
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您正在做的业务是:人力资源管理--薪酬标准管理--薪酬标准登记查询</span><br />
        <br />
        <div style="text-align:right">
            <el-button type="primary" onclick="history.back()">返回</el-button>
        </div>
        <div>
            <span>薪酬总数:{{total}}， 总人数:{{total2}}，基本薪酬总数:{{total3}}</span>
        </div>
        <table class="solid-table">
            <thead>
                <tr class="bj">
                    <th v-for="(header, index) in salaryStandardDetailsHeaders" :key="index">{{ header }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                    <td>{{ item.kf_id }}</td>
                    <td>{{ item.kf_name }}</td>
                    <td>{{ item.ha }}</td>
                    <td>{{ item.salary_sum }}</td>
                    @* <td v-for="(list3Item, i) in item.list3" :key="i">
                        {{ list3Item.salary }}
                    </td>
                    <td><input style="width:125px" v-model="item.bouns_sum" /></td>
                    <td><input style="width:125px" v-model="item.sale_sum" /></td>
                    <td><input style="width:125px" v-model="item.deduct_sum" /></td>
                    <td>{{item.salary_paid_sum}}</td> *@
                    <td><el-button type="primary" v-on:click="handleClick(item)">登记</el-button></td>
                </tr>

            </tbody>
        </table>
        @* <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[ 2, 4,6,8]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       prev-text="上一页"
                       next-text="下一页">
        </el-pagination> *@
    </div>



    <script type="text/javascript">
        // 定义一个辅助函数用于解码UTF-8字符串
        function decodeUtf8(encodedStr) {
            // 处理URI编码的情况
            if (encodedStr.includes('%')) {
                return decodeURIComponent(encodedStr);
            }

            // 处理普通字符串情况
            return encodedStr;
        }

        // 去除字符串两端的引号
        function removeQuotes(str) {
            if (str && typeof str === 'string') {
                // 移除开头的引号
                if (str.startsWith('"')) {
                    str = str.substring(1);
                }
                // 移除结尾的引号
                if (str.endsWith('"')) {
                    str = str.substring(0, str.length - 1);
                }
            }
            return str;
        }
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);
                const currentPage = ref(1);
                const pageSize = ref(4);
                const total = ref(0);
                const total2 = ref(0);
                const total3 = ref(0);
                const salaryStandardDetailsHeaders = ref(['序号', 'I级机构名称', '人数','基本薪酬总额(元)','操作']);

                const handleSizeChange = (newSize) => {
                  pageSize.value = newSize;
                  fill();
                };
                const handleCurrentChange = (newPage) => {
                  currentPage.value = newPage;
                  fill();
                };
                const handleClick = (row)=>{
                    parent.mainFrame.location.href='@Url.Action("Server4", "SDM_insert")' + '?kf_id=' + row.kf_id0;
                }
                function fill() {
                  axios.get(`/SDM_insert/Index2`)
                  .then(res => {
                      console.info(res.data);
                      tableData.value = res.data.list;
                      total.value = res.data.list.length;
                      for(var i = 0;i<tableData.value.length;i++){
                          total2.value = total2.value+tableData.value[i].ha;
                          total3.value = total3.value+tableData.value[i].salary_sum;
                          // total4.value = total4.value+tableData.value[i].salary_paid_sum;
                          // console.info(tableData.value[0]);
                      }
                  }).catch(err => {
                      console.info(err)
                  })

                  
                }
                onMounted(() => {
                    fill();
                });
                

                return {
                    tableData,
                    fill,
                    currentPage,
                    pageSize,
                    total,
                    total2,
                    total3,
                    handleSizeChange,
                    handleCurrentChange,
                    salaryStandardDetailsHeaders,
                    handleClick
                };
            }
        });


        app.use(ElementPlus).mount('#app');

    </script>
</body>
</html>